<template>
	<div class="main">
		<div class="title">
			Quick search
		</div>
		<el-form :model="ruleForm"
						 :rules="rules"
						 ref="ruleForm"
						 :hide-required-asterisk="true"
						 label-width="170px"
						 class="ruleForm">

      <el-form-item class="formItem" label="Host :" prop="host">
        <el-select class="inputWidth" v-model="ruleForm.host" placeholder="" >
          <el-option v-for="(n, idx) in hostList" :label="n.host" :value="n.host"
                     :key="idx"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="formItem" label="Cell/Tissue :" prop="cellTissue">
        <el-select class="inputWidth" v-model="ruleForm.cellTissue" placeholder="" >
          <el-option v-for="(n, idx) in cellTissueList" :label="n.cell_tissue" :value="n.cell_tissue"
                     :key="idx"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="formItem" label="Virus Species :" prop="virusSpecies">
        <el-select class="inputWidth" v-model="ruleForm.virusSpecies" placeholder="" >
          <el-option v-for="(n, idx) in speciesList" :label="n.virus_species" :value="n.virus_species"
                     :key="idx"></el-option>
        </el-select>
      </el-form-item>

<!--      <el-form-item label="Transcript Type:" prop="rnaType">-->
<!--        <el-select class="inputWidth" v-model="ruleForm.rnaType" placeholder="" @change="rnaTypeChange">-->
<!--          <el-option v-for="(n, idx) in rnaTypeList" :label="n.name" :value="n.name" :key="idx"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="Gene :" prop="gene">
        <el-input class="inputWidth input" v-model="ruleForm.gene"></el-input>
      </el-form-item>

      <el-form-item label="Region :" required>
        <el-row class="inputWidth input">
          <el-col class="line" :span="2" align="center">from</el-col>
          <el-col :span="10">
            <el-form-item prop="start">
              <el-input type="number" v-model="ruleForm.start" >
                <template slot="append">bp</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" align="center">to</el-col>
          <el-col :span="10">
            <el-form-item prop="end">
              <el-input type="number" v-model="ruleForm.end" >
                <template slot="append">bp</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

<!--      <el-form-item label="Junction read counts :" prop="junctionReadCounts">-->
<!--        <el-row class="inputWidth input">-->
<!--          <el-col class="line" :span="2" align="center"> > </el-col>-->
<!--          <el-col :span="10">-->
<!--            <el-input type="number" v-model="ruleForm.junctionReadCounts" />-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form-item>-->



			<el-form-item label="Detection_method or source :" prop="detectionMethod">
				<el-checkbox-group class="inputWidth" v-model="ruleForm.detectionMethod">
					<el-checkbox v-for="(n , idx) in detectionGroups" :label="n" :key="idx" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>

			<el-form-item style="display: flex;justify-content: center">
				<el-button @click="resetForm('ruleForm')">Reset</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
			</el-form-item>
		</el-form>

		<dy-table :loading="dyTableData.loading"
							:list="dyTableData.list"
							:total="dyTableData.total"
							:rnaType="ruleForm.rnaType"
							@refreshData="refreshDyData"
							id="dy-table" class="dy-table"
							:key="key"
							v-if="dyTableData.show" ref="dyTable"/>

	</div>
</template>

<script>
  import {getAllSpecies} from "../../api/statistic";
  import {cellTissue, getDetectionMethod, groupByHost, searchList} from "../../api/search";
  import {isEmpty} from "../../utils/validate";
  import DyTable from "../components/dyTable";

  export default {
    name: "quick",
    components: {DyTable},
    data() {
      return {
        ruleForm: {
          pageNum: 1,
          pageSize: 10,

          virusSpecies: "ALL",
          host: "ALL",
          cellTissue: "ALL",
          gene: null,
          rnaType: 'lncRNA',
          detectionMethod: []
        },
        detectionGroups: [],
        selectMethods: [],
        rules: {
          virusSpecies: [
            {required: true, message: 'Virus Species can\'t be empty', trigger: 'change'}
          ],
          host: [
            {required: true, message: 'Host can\'t be empty', trigger: 'change'}
          ],
          cellTissue: [
            {required: true, message: 'Cell tissue can\'t be empty', trigger: 'change'}
          ],
          // gene: [
          //   {required: true, message: 'Gene can\'t be empty', trigger: ['blur', 'change']}
          // ],
          // detectionMethod: [
          //   {type: 'array', required: true, message: 'Detection method can\'t be empty', trigger: ['change']}
          // ],
          // junctionReadCounts: [
          //   { required: true, message: 'Junction read counts can\'t be empty', trigger: ['blur', 'change']}
          // ],
          // start: [
          //   {required: true, message: 'Region from can\'t be empty', trigger: ['blur', 'change']}
          // ],
          // end: [
          //   {required: true, message: 'Region to can\'t be empty', trigger: ['blur', 'change']}
          // ],
        },
        speciesList: [],
        hostList: [],
        cellTissueList: [],
        rnaTypeList: [
            // {name: "mRNA"},
          {name: "lncRNA"}
          // , {name: "circRNA"}, {name: "sRNA"}
        ],
        key: 0,
        dyTableData: {
          show: false,
          list: [],
          total: 0,
          loading: false,
        }
      }
    },
    mounted() {

      this.loadHostData()
      this.loadCellTissue()
      this.loadMethods()
      this.loadAllSpecies()
    },
    methods: {
      async loadHostData() {
        const res = await groupByHost({
          rnaType: this.ruleForm.rnaType
        })

        res.data.unshift( {host: "ALL"} )
        this.hostList = res.data
      },
      async loadCellTissue() {
        const res = await cellTissue({
          rnaType: this.ruleForm.rnaType
        })
        res.data.unshift( {cell_tissue: "ALL"} )
        this.cellTissueList = res.data
      },
      async loadAllSpecies() {
        const res = await getAllSpecies()
        res.data.unshift( {virus_species: "ALL"} )
        this.speciesList = res.data
      },
      async loadMethods() {
        if (isEmpty(this.ruleForm.rnaType)) {
          return
        }
        this.detectionGroups = [];
        const res = await getDetectionMethod({rnaType: this.ruleForm.rnaType});
        this.detectionGroups = res.data
      },

      refreshDyData(pageNum, pageSize) {
        this.ruleForm.pageNum = pageNum
        this.ruleForm.pageSize = pageSize
        this.loadData()
      },

      async loadData() {
        this.dyTableData.show = true
        this.dyTableData.loading = true

        let params = {...this.ruleForm}
        if (params.host == "ALL") {
          params.host = null
        }
        if (params.cellTissue == "ALL") {
          params.cellTissue = null
        }
        if (params.virusSpecies == "ALL") {
          params.virusSpecies = null
        }
        params.detectionMethod = params.detectionMethod.join(",")

        const res = await searchList(params)

        if (res) {
          this.dyTableData.total = res.total
          this.dyTableData.list = res.rows;
        }
        this.dyTableData.loading = false
        this.goDyTable()
      },
      goDyTable() {
        this.$nextTick(() => {
          // 实现滚动效果
          let top = document.documentElement.scrollTop
          let endY = document.getElementById("dy-table").offsetTop
          const timeTop = setInterval(() => {
            document.body.scrollTop = document.documentElement.scrollTop = top += 20
            if (top >= endY) {
              clearInterval(timeTop);
            }
          }, 3);
        })
      },
      rnaTypeChange(n) {
        this.loadMethods()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.key += 1
						this.loadData()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" scoped>

	.main {
		width 1170px
		margin-top 20px
		padding-top 10px
		font-family: Times New Roman;

		.title {
			font-size 28px
			text-align left
			margin-bottom 20px
			padding 15px 0
			color #11427D
			font-weight 800
		}

		.middleTitle {
			margin 20px 0 10px 0
			color #11427d
			font-size 16px
			font-weight 600
		}

		.ruleForm {
			border: 1px solid #f0f0f0;
			border-radius: 16px;
			width: 100%;
			padding: 42px 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;

			.inputWidth {
        margin-left: 30px;
				width: 550px;
			}
		}

		.el-form-item /deep/ {
			label {
				padding 0
			}
		}

		.headWarp {
			display flex
			flex-direction column
			align-items center
			margin 80px 60px 60px 60px
			font-weight 900
			font-size 25px
			color #0a2458
			text-align center
			font-family: Times New Roman;

			.line {
				margin-top 10px
				width 200px
				height 1px
				background-color #0a2458
			}
		}

		.el-button--primary /deep/ {
			background-color: #11427D;
			border-color: #11427D;
			border-radius 7px
			margin-right 15px

			span, i {
				font-weight 700
			}
		}

		.inputWidth /deep/ {
			.el-input.is-active .el-input__inner, .el-input__inner:focus {
				border-color: #11427D;
				outline: 0;
			}
		}

		.el-button:hover {
			color: #11427D;
			border-color: #11427D;
			background-color: #e0e5ef;
		}

		.el-checkbox /deep/ {
			.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
				background-color: #0064bc;
				border-color: #0064bc;
			}

			.el-checkbox__input.is-checked + .el-checkbox__label {
				color #11427D;
			}

			.el-checkbox__label {
				/*color #11427D;*/
			}
		}
	}

</style>
